/*
 * @Author       : xiangmin
 * @File         : 手机电话号码加密
 * @Date         : 2023-06-28 10:32:30
 * @LastEditors  : xiangmin
 * @LastEditTime : 2023-07-27 22:48:25
 */

import { mask } from '@/utils'
import type { ObjectDirective } from 'vue'

const ARGS = ['phone', 'name', 'idCard']
const FN_MAP = {
	phone: mask.phone,
	name: mask.name,
	idCard: mask.idCard
}

const directive: ObjectDirective<HTMLElement, boolean> = {
	mounted(element, binding) {
		const { value, arg } = binding
		if (value && ARGS.includes(arg as string)) {
			const fn = FN_MAP[arg as string]
			element.innerHTML = fn && fn(value)
		}
	},

	updated(element, binding) {
		const { value, oldValue, arg } = binding
		if (value !== oldValue && binding.value && ARGS.includes(arg as string)) {
			const fn = FN_MAP[arg as string]
			element.innerHTML = fn && fn(value)
		}
	}
}

export default directive
